import 'package:flutter/material.dart';

void main() {
  runApp(const _MyApp());
}

class _MyApp extends StatelessWidget {
  const _MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Flutter",
        theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true),
        home: const _MyHomePage());
  }
}

class _MyHomePage extends StatelessWidget {
  const _MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("GridView Demo"),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: _WrapDemo());
  }
}

// 简单实现 GridView
class _GridViewDemo extends StatelessWidget {
  const _GridViewDemo({super.key});

  // 请看构造器中的 gridDelegate
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      primary: false,
      padding: const EdgeInsets.all(20.0),
      // 子元素之间间距
      crossAxisSpacing: 10.0,
      // 横向轴子元素的数量
      crossAxisCount: 2,
      children: const <Widget>[
        Text("He\'d have you all unravel at the"),
        Text("Heed not the rabble"),
        Text("Sound of screams but the"),
        Text("Who scream"),
        Text("Revolution is coming..."),
        Text("Revolution, they ...")
      ],
    );
  }
}

// 一般情况下,不只是 ListView
// 请包裹一层 CustomScrollView
class _CustomScrollViewDemo extends StatelessWidget {
  const _CustomScrollViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Demo"),
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200.0,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
                childAspectRatio: 4.0),
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text("grid item $index"),
              );
            }, childCount: 20),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: Text("list item $index"),
              );
            }),
          )
        ],
      ),
    );
  }
}

// 弹性布局 direction flex
class _FlexDemo extends StatelessWidget {
  const _FlexDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 400.0,
          child: Flex(
            direction: Axis.vertical,
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.yellow,
                ),
              )
            ],
          ),
        ),
        SizedBox(
          height: 120.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.blue,
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                ),
              )
            ],
          ),
        )
      ],
    );
  }
}

// Wrap 自由换行
class _WrapDemo extends StatelessWidget {
  _WrapDemo({super.key});

  final list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Wrap(
          // 水平方向间距
          spacing: 4.0,
          // 垂直方向间距
          runSpacing: 4.0,
          children: list.map((item) {
            return Container(
              alignment: Alignment.center,
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text(
                "item $item",
                style: const TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            );
          }).toList()),
    );
  }
}
